<template>
  <div class="content-section">
    <el-card class="auth-card" style="height: 730px">
      <template #header>
        <div class="card-header">
          <span>信息认证</span>
        </div>
      </template>

      <div class="card-content">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
          class="center-tabs"
        >
          <!-- 个人认证 -->
          <el-tab-pane label="个人认证" name="first">
            <el-form
              :model="form"
              label-width="250px"
              size="large"
              class="form-container"
            >
              <el-form-item label="真实姓名">
                <el-input
                  v-model="form.realName"
                  style="width: 300px"
                /><el-text
                  style="font-size: 12px; color: #41bb83; margin-left: 10px"
                  >请务必与扫码登录的微信实名保持一致,否则将导致提现失败</el-text
                >
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="form.cardNo" style="width: 300px" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.email" style="width: 300px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="personSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 企业认证 -->
          <el-tab-pane label="企业认证" name="second">
            <div class="company-section">
              <el-table :data="companyList" border style="width: 100%">
                <el-table-column prop="companyName" label="企业名称" />

                <el-table-column label="状态" width="120">
                  <template #default="{ row }">
                    <el-tag
                      :type="
                        {
                          '0': 'warning',
                          '1': 'success',
                          '-1': 'danger',
                        }[row.checkStatus] || 'info'
                      "
                    >
                      {{
                        {
                          "0": "审核中",
                          "1": "已通过",
                          "-1": "未通过",
                        }[row.checkStatus] || "未知"
                      }}
                    </el-tag>
                  </template>
                </el-table-column>

                <el-table-column prop="companyNo" label="公司税号" />
                <el-table-column prop="email" label="邮箱" />
                <el-table-column label="操作" width="180">
                  <template #default="{ row }">
                    <el-button
                      type="text"
                      size="small"
                      @click="editCompany(row)"
                      >编辑</el-button
                    >
                  </template>
                </el-table-column>
                <el-empty
                  v-if="!companyList.length"
                  description="暂无企业信息"
                  style="width: 100%; padding: 40px 0"
                />
              </el-table>
              <!-- 添加按钮放在列表下方 -->
              <div style="text-align: center; margin-top: 20px">
                <el-button type="primary" @click="openCompanyDialog">
                  添加企业
                </el-button>
              </div>

              <!-- 新增/编辑 企业 对话框 -->
              <el-dialog
                v-model="companyDialogVisible"
                title="企业认证"
                width="500px"
                @close="resetCompanyForm"
              >
                <el-form :model="companyForm" label-width="120px">
                  <el-form-item label="企业名称">
                    <el-input v-model="companyForm.companyName" />
                  </el-form-item>
                  <el-form-item label="公司税号">
                    <el-input v-model="companyForm.companyNo" />
                  </el-form-item>
                  <el-form-item label="邮箱">
                    <el-input v-model="companyForm.email" />
                  </el-form-item>
                </el-form>
                <template #footer>
                  <div class="dialog-footer">
                    <el-button @click="companyDialogVisible = false"
                      >取消</el-button
                    >
                    <el-button type="primary" @click="saveCompany"
                      >保存</el-button
                    >
                  </div>
                </template>
              </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { order } from '../../api/order';

// 个人认证
const form = reactive({ realName: '', cardNo: '', email: '' });


// 企业认证列表 & 表单
const companyList = ref([]);
const companyForm = reactive({ id: null, companyName: '', companyNo: '', email: '' });
const companyDialogVisible = ref(false);

// 标签页
const activeName = ref('first');
const handleClick = (tab) => { activeName.value = tab.name; }

// 加载个人信息
const loadPersonInfo = async () => {
  try {
    const res = await order.GetUserInfo();
    if (res.code === 0 && res.data.certPerson) {

      const p = res.data.certPerson;
      form.realName = p.realName;
      form.cardNo = p.cardNo;
      form.email = p.email;
    }
  } catch { }
}

// 提交个人认证
const personSubmit = async () => {

  try {
    const res = await order.GetUserInfo(form);
    if (res.code === 0) {
      ElMessage.success('个人认证提交成功');
      await loadPersonInfo();
    } else {
      throw new Error(res.msg);
    }
  } catch (err) {
    ElMessage.error(err.message || '认证失败');
  }
}

// 加载公司列表（改用正确字段）
const loadCompanyInfo = async () => {
  try {
    const res = await order.GetCompanyInfo();
    if (res.code === 0 && res.data.certCompany) {
      companyList.value = res.data.certCompany.info || [];
    }
  } catch { }
}

// 打开“添加企业”对话框
const openCompanyDialog = () => {
  resetCompanyForm();
  companyDialogVisible.value = true;
}

// 编辑企业
const editCompany = (row) => {
  companyForm.code = row.code;
  companyForm.companyName = row.companyName;
  companyForm.companyNo = row.companyNo;
  companyForm.email = row.email;
  companyDialogVisible.value = true;
}

// 保存企业
const saveCompany = async () => {
  try {
    let res;
    if (companyForm.code) {
      // 更新已有企业
      res = await order.GetCompanyInfo({
        code: companyForm.code,
        companyName: companyForm.companyName,
        companyNo: companyForm.companyNo,
        email: companyForm.email
      });
    } else {
      // 新增企业
      res = await order.GetCompanyInfo({
        companyName: companyForm.companyName,
        companyNo: companyForm.companyNo,
        email: companyForm.email
      });
    }
    if (res.code === 0) {
      ElMessage.success('保存成功');
      companyDialogVisible.value = false;
      await loadCompanyInfo();
    } else {
      throw new Error(res.msg);
    }
  } catch (err) {
    ElMessage.error(err.message || '保存失败');
  }
}

// 重置企业表单
const resetCompanyForm = () => {
  companyForm.code = null;
  companyForm.companyName = '';
  companyForm.companyNo = '';
  companyForm.email = '';
}

onMounted(() => {
  loadPersonInfo();
  loadCompanyInfo();
});
</script>

<style scoped lang="scss">
.content-section {
  animation: fadeIn 0.3s ease;
}
.auth-card ::v-deep .el-card__body {
  height: calc(100% - 60px);
  overflow: hidden;
}
.card-content {
  height: 100%;
  overflow-y: auto;
  padding-right: 8px;
}
.form-container {
  max-width: 900px;
  margin: auto;
}
.company-section {
  padding: 0 20px;
}
.dialog-footer {
  text-align: right;
  padding: 12px 16px;
}
</style>
